<template>
<div>
    <div>
		
        <el-card class="card">
			<el-header style="font-size: 20px;">消息中心</el-header>
			<div>
           <el-text>消息搜索</el-text>
            <el-row :gutter="20">
                <el-col :span="7">
                    <el-input
                            placeholder="请输入内容"
                            class="input-with-select"
                            v-model="keyWord"
                            clearable
                    >
                    </el-input>
                </el-col>
				
                <el-col :span="13">
                    <span class="tj">
                        <el-button type="primary" @click="fillist">搜索</el-button>
                        <el-button>清空</el-button>
                    </span>
                </el-col>
            </el-row>
			</div>
         <el-table :data="showList" stripe style="width: 100%">
			 <el-table-column type="expand" width="150px" label="查看详情/收起">
				  <template #default="props">
					  <div m="4" style="line-height: 150%; font-size: 18px;background-color:ghostwhite">
						  <p m="t-0 b-2">发布于: {{ props.row.noticeCreateTime }}</p>
						  <p m="t-0 b-2">编辑于: {{ props.row.noticeUpdateTime }}</p>
						  <p m="t-0 b-2">发布者: {{ props.row.noticeAdminName }}</p>
						  <p m="t-0 b-2">通知类型: {{ props.row.noticeType }}</p>
						     <el-divider></el-divider>
						   
						   <div style="text-indent:2em;">
							   <h2 style="line-height: 250%;margin-left: 40%;">{{props.row.noticeTitle}}</h2>
							    <el-text style="line-height: 200%; font-size: 18px;">{{props.row.noticeContent}}</el-text> 
						   </div>
						
					  </div>
				 
			 </template>
			 </el-table-column>
			 
             <el-table-column prop="noticeTitle" label="通知标题" ></el-table-column>
			 <el-table-column prop="noticeType" label="通知类型" width="150px"></el-table-column>
             <el-table-column prop="noticeAdminName" label="管理员" width="150px"></el-table-column>
             <el-table-column prop="noticeCreateTime" label="创建时间" width="300px">
     <!--            <template slot-scope="scope">
                     {{ new Date(scope.row.noticeCreateTime).toLocaleString() }}
                 </template> -->
             </el-table-column>
             <el-table-column label="操作" width="180px">
                     <!-- 编辑按钮 -->
              <el-button type="warning" >删除</el-button>
    
             </el-table-column>
         </el-table>
        </el-card>
			</div>
			<div class="pagination">
				   <el-pagination  small background layout="total,prev, pager, next"
					:total="totalItems"
					:page-size="pageSize"
					v-model:current-page="currentPage"
					@current-change="handleCurrentChange"
					style="margin-top: 20px;margin-left: 40%;" />
			</div>
			</div>
</template>
<script setup lang="ts">

import {allNotice} from '@/api/notice';
import { ref, onMounted, watch } from 'vue'
const pageSize = ref([])
const noticeList=ref([])
const showList=ref([])
const fillist = ref()
const keyWord=ref('')
const currentPage = ref(1)
const totalItems = ref(1)
const page = ref({//配置对应的查询参数
      pageNum: 1,
      pageSize: 10,
    });
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  page.value.pageNum = val
   console.log(page)
  getNotice(page);
}
	function getNotice(p){
	allNotice(p).then((res) => {
	console.log("页面查询结果",res)
		 noticeList.value = res.data
		 showList.value = noticeList.value.records
		 console.log("noticeList",showList.value)
		 // navigatePages
		 totalItems.value=noticeList.value.total
		 currentPage.value = noticeList.value.current
		 pageSize.value = noticeList.value.size
		 console.log("current",currentPage.value)
		 })
		 }
		// const fillist=watch(showList,keyWord)=>{
		//      // 返回过滤后的数组
		// 	 const key = keyWord.value;
		// 	 console.log("key=========",key)
		//      showList.value.filter((p) => {
		// 		 console.log(p.noticeTitle.indexOf(key))
		// 		 return p..indexOf(key) !==-1
		// 	 });
		//    }
		getNotice(page);
		
	
	

</script>
<style>
    .tj {
        margin-left: 10px;
    }
	.card {
		width: 90%;
	   margin: auto;
	  padding-bottom: 20px;
	}
</style>